<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>简易富文本编辑器</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <style type="text/css">
    #editor {
      width: 600px;
      height: 200px;
      border: 1px solid #ccc;
    }

    button {
      margin: 1px;
      border: 1px solid #aaa;
      background: #ffe;
      cursor: pointer;
      overflow: hidden;
    }

    button:hover {
      background: #ccc;
      border: 1px solid #00f;
    }
  </style>
</head>

<body>
  <button id="btn1"></button>
  <button id="btn2"></button>
  <button id="btn3"></button>
  <button id="btn4"></button>
  <button id="btn5"></button>
  <div id="editor">
    天下熙熙皆为利来，天下攘攘皆为利往。
  </div>
  <input id="printContent" type="button" value="打印编辑器内容">
  <script type="text/javascript">
    initEditor();

    //初始化
    function initEditor() {
      openOrCloseEditor("editor", "true");//开启元素编辑
      bindBtnCommand();//给样式按钮绑定命令
    }
    /**
    * 
    * 功能： 开启元素编辑功能
    * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
    */
    function openOrCloseEditor(el, operate) {
      var editor = document.getElementById(el);
      editor.contentEditable = operate;
    }

    //按钮绑定命令
    function bindBtnCommand() {
      var btns = document.getElementsByTagName("button"),
        btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
        len = btnConfigs.length;
      for (var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
        (function (btnConfig, btn) {
          var msg = btnConfig.split("|"),
            lab = msg[0],
            value = msg[1],
            title = msg[2];
          btn.innerHTML = lab;
          btn.title = title;
          btn.onclick = function (e) {
            document.execCommand(lab, false, value);
          }
        })(btnConfig, btns[i]);
      }
    }

    //获取编辑器内嵌内容
    function getContent(el) {
      var editor = document.getElementById(el);
      return editor.innerHTML;
    }

    //打印按钮绑定触发事件
    document.getElementById("printContent").onclick = function (e) {
      var content = getContent("editor");
      document.write(content);
    };
  </script>
</body>

</html>